<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>单个元素实现的 CSS3 Loading 效果</title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="A collection of loading spinners animated with CSS">
    <meta property="og:title" content="Single Element CSS Spinners">
    <meta property="og:type" content="website">
    <meta property="og:description" content="A collection of loading spinners animated with CSS">
    <meta property="og:image" content="http://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg">
    <meta property="og:url" content="http://projects.lukehaas.me/css-loaders/">
    <script src="script/modernizr-2.8.2.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/load1.css">
    <link rel="stylesheet" href="css/load2.css">
    <link rel="stylesheet" href="css/load3.css">
    <link rel="stylesheet" href="css/load4.css">
    <link rel="stylesheet" href="css/load5.css">
    <link rel="stylesheet" href="css/load6.css">
    <link rel="stylesheet" href="css/load7.css">
    <link rel="stylesheet" href="css/load8.css">
    <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
</head>

<body>
    <header>
        <div class="inner"></div>
    </header>
    <main style="margin-top:90px">
        <div class="inner">
            <div class="load-container load1">
                <div class="loader">Loading...</div><a href="#load1">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load2">
                <div class="loader">Loading...</div><a href="#load2">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load3">
                <div class="loader">Loading...</div><a href="#load3">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load4">
                <div class="loader">Loading...</div><a href="#load4">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load5">
                <div class="loader">Loading...</div><a href="#load5">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load6">
                <div class="loader">Loading...</div><a href="#load6">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load7">
                <div class="loader">Loading...</div><a href="#load7">&lt; View Source &gt;</a>
            </div>
            <div class="load-container load8">
                <div class="loader">Loading...</div><a href="#load8">&lt; View Source &gt;</a>
            </div>
        </div>
        <div class="overlay hidden"></div>
        
  

    </main>
    <div class="footer-banner" style="width:728px; margin:20px auto 0"></div>
    <script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
    <script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
</body>

</html>